import { ref, readonly } from 'vue'

// 默认头像URL
const DEFAULT_AVATAR = './avatar.jpg'

// 从 localStorage 读取头像
function getStoredAvatar() {
    try {
        const stored = localStorage.getItem('userAvatar')
        return stored || DEFAULT_AVATAR
    } catch (error) {
        console.error('读取头像失败:', error)
        return DEFAULT_AVATAR
    }
}

// 保存头像到 localStorage
function saveAvatar(avatarUrl) {
    try {
        if (avatarUrl && avatarUrl !== DEFAULT_AVATAR) {
            localStorage.setItem('userAvatar', avatarUrl)
        } else {
            localStorage.removeItem('userAvatar')
        }
    } catch (error) {
        console.error('保存头像失败:', error)
    }
}

// 创建全局响应式头像状态（单例模式，确保所有组件共享同一个状态）
const avatarUrl = ref(getStoredAvatar())

/**
 * 用户头像 composable
 * 提供统一的头像管理，支持动态更新
 * 所有使用此 composable 的组件都会共享同一个头像状态
 */
export function useUserAvatar() {
    // 更新头像
    function updateAvatar(newAvatarUrl) {
        if (newAvatarUrl) {
            avatarUrl.value = newAvatarUrl
            saveAvatar(newAvatarUrl)
        }
    }

    // 重置为默认头像
    function resetAvatar() {
        avatarUrl.value = DEFAULT_AVATAR
        localStorage.removeItem('userAvatar')
    }

    // 返回只读的 ref，防止外部直接修改，必须通过 updateAvatar 方法
    return {
        avatarUrl: readonly(avatarUrl),
        updateAvatar,
        resetAvatar,
    }
}

